<template>
    <el-row>
        <el-col :span="24" class="col">
            <el-button type="primary" @click="xinzeng">新增评价</el-button>
        </el-col>

        <el-col :span="24" class="col">
            <el-table :data="reviewList" border style="width: 100%">
                <el-table-column prop="id" label="评价ID" align="center" label-class-name="header" />
                <el-table-column prop="username" label="用户名" align="center" label-class-name="header" />
                <el-table-column prop="context" label="评价内容" align="center" label-class-name="header" />
                <el-table-column prop="time" label="评价时间" align="center" label-class-name="header" />
                <el-table-column prop="courseId" label="课程id" align="center" label-class-name="header" />
                <el-table-column prop="score" label="评分" align="center" label-class-name="header" />
                <el-table-column label="操作" align="center" label-class-name="header">
                    <template #default="item">
                        <el-button type="text" @click="edite(item.row)">编辑</el-button>
                        <el-button type="text" @click="del(item.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>

        <el-dialog v-model="show" :title="title" width="800" destroy-on-close="true">
            <EditeReview :form="form" @operate="operateAction" v-if="title == '编辑评价'" />
            <XinZengReview v-if="title == '新增评价'" @operate="operateAction" />
        </el-dialog>
    </el-row>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import EditeReview from './components/courseReview/EditeArea.vue';
import XinZengReview from './components/courseReview/XinZeng.vue';
let res = null;

// 定义评价列表数据
let reviewList = ref([]);
let show = ref(false);
let title = ref("");
let form = ref({});

const edite = (data) => {
    show.value = true;
    title.value = "编辑评价";
    form.value = data;
};

const xinzeng = () => {
    show.value = true;
    title.value = "新增评价";
};

const del = async (item) => {
    // 根据实际接口更新删除逻辑
    await axios.get("/api/courseReview/deleteCourseReviewById?id="+item.id);
    fetchReviewList();
};

const operateAction = async (data) => {
    if (data) {
        await axios.post("/api/courseReview/update", { ...data });
        fetchReviewList();
    }
    show.value = false;
};

// 获取课程评价列表数据
const fetchReviewList = async () => {
    res = await axios.get("/api/courseReview/findAllCourseReview");
    reviewList.value = res.data.data;
};

// 组件首次挂载时获取数据
onMounted(fetchReviewList);
</script>

<style lang="less" scoped>
.col {
    margin: 10px 0;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>
